<!--这个页面是用来保证用户点击其他用户图像时显示其他用户的相关内容，和个人页面差不过大，所以独立出来-->
<template>
  <div class="MainBox w MainPageHeader">
    <div class="otherPage">
      <div class="otherPageHeader">
        <div class="pageUserData">
          <div class="user-info">
            <div class="userImg">
              <img :src="[publicUrl + userMsg.image]" alt="">
            </div>
            <div class="user-basic">
              <div class="nickName">{{ userMsg.nickname }}</div>
              <div>性别：{{ userMsg.sex }}</div>
              <div>年龄：{{ userMsg.age }}</div>
              <div class="personalProfile">
                个性签名：{{ userMsg.message }}
              </div>
            </div>
          </div>
        </div>
        <div class="headerBottom">
          <div class="bottomData">主页</div>
        </div>
      </div>
      <div class="wrapper otherPageMain">

        <div class="headerPartition">
          <div class="partitionTitle">他的收藏</div>
        </div>

        <div class="videoRecommendList">
          <ul class="recommendBox clearfix">
            <li class="course-item" v-for="item in Collections" :key="item.videoId">
              <div class="course-img">
                <img :src="[publicUrl + item.image]" alt="视屏图片">
              </div>
              <div class="course-connect">
                <div class="connect-info">{{ item.name }}</div>
                <div class="course-bottom">
                  <span>{{ item.nickname }}</span>
                  <span>{{ item.time }}</span>
                </div>
              </div>
            </li>
          </ul>
          <pagerView :pageInfo="collectPage" @giveFatherPageNo="getSonPageNo"></pagerView>
        </div>

        <div class="headerPartition">
          <div class="partitionTitle">他的动态</div>
        </div>

        <div class="dynamicsList">
          <div class="dynamicsItem" v-for="item in Dynamics" :key="item.dynamicId">
            <div class="dynamicsItemMain">
              <div class="dynamicsItemHeader">
                <div class="userImg" @click="gotoPerson(item)">
                  <img v-if="item.author.image === '无'" src="../../assets/Img/defaultUserImg.png" alt="">
                  <img v-else :src="[publicUrl + item.author.image]" alt="">
                </div>
                <div class="dynamiscItemUserInformation">
                  <div class="nickName">{{ item.author.nickname }}</div>
                  <div class="createDate">{{ item.createDate }}</div>


                </div>
              </div>
              <div class="dynamicsItemMiddle">
                <div class="middleContent">{{ item.content }}</div>
              </div>
              <div class="dynamicsItemBottom">
                <img :src="[publicUrl + item.picture]" v-if="item.picture" alt="">
              </div>

            </div>
          </div>
          <el-pagination background layout="prev, pager, next" :total="totals" :page-size="pageSize"
            @current-change="handleCurrentChange" @prev-click="prevPage" @next-click="nextPage" class="page">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getDynamics, getuserMsg, userVideoCollect } from '../../service/userServers'
import { createPublicUrl } from "@/utils";
import PagerView from "@/components/remark/PagerView.vue";

export default {
  name: 'otherPerson',
  components: { PagerView },
  data() {
    return {
      page: 1, //请求第一次的params
      pageSize: 5,
      totals: 0,//页面总条数
      userId: '',
      Dynamics: {},//动态信息
      userMsg: {},//其他用户信息
      Collections: {},//收藏信息
      collectPage: {} //分页器中存储的信息
    }
  },
  mounted() {
    this.userId = this.$route.query.userId
    this.getotherDynamic()
    this.getOthersInformation()
    this.getotherCollect(1)
  },
  methods: {
    //获取用户的动态列表
    getOthersInformation() {
      getuserMsg(this.userId).then((res => {
        this.userMsg = res.data.data
      }))
    },
    getotherDynamic() {
      getDynamics(this.userId, this.page).then((res => {
        this.Dynamics = res.data.data.list
        this.totals = res.data.data.total
      }))
    },
    //当前页数改变
    handleCurrentChange(page) {
      this.page = page;
      console.log(this.page)
      this.getotherDynamic();
    },
    //上一页
    prevPage(page) {
      this.page = page - 1
    },
    //下一页
    nextPage(page) {
      this.page = page + 1
    },
    //获取用户收藏视屏列表
    getotherCollect(pageNum) {
      console.log(this.userId)
      userVideoCollect(pageNum, this.userId).then((res) => {
        if (res.data.code === 200) {
          let data = {}
          data.pageNo = res.data.data.pageNum     //当前的页码数
          data.pagesize = res.data.data.pageSize  //每一页的大小
          data.total = res.data.data.total        //总共的个数
          data.pageTotal = res.data.data.pages    //总共有几页
          //将获取的分页数据转化给分页器中
          this.collectPage = data
          this.Collections = res.data.data.list
        }
      })
    },
    //获取分页器中传递的数据
    getSonPageNo(pageNum) {
      this.getotherCollect(pageNum)
    },

  },
  computed: {
    //获取图片存储器中公共的OSS的公共地址头 
    publicUrl() {
      return createPublicUrl()
    },
  },
}
</script>

<style lang="less" scoped>
.otherPage {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  .otherPageHeader {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    background: url(../../assets/Img/banner/person.png) no-repeat;
    background-size: 100%;

    .pageUserData {
      z-index: 10;
      .user-info {
        display: flex;
        align-items: center;
        margin-left: 20px;
        padding-bottom: 16px;

        .userImg {
          width: 72px;
          height: 72px;
        }

        .user-basic {
          margin-left: 20px;
          color: #ffffff;

          .nickName {
            margin-bottom: 5px;
            font-weight: 700;
            line-height: 18px;
            font-size: 18px;
          }

          .personalProfile {
            font-size: 14px;
          }
        }
      }
    }
  }
  .headerBottom {
    padding: 0 20px;
    height: 54px;
    line-height: 54px;
    background: #fff;
    box-shadow: 0 0 0 1px #eee;
    border-radius: 0 0 4px 4px;

    .bottomData{
      height: 100%;
      font-size: 18px;
      color: #222;
    }
  }
}
.otherPageMain {
  margin-top: 30px;
}
.headerPartition {
  margin-bottom: 17px;
  border-bottom: 1px solid #eee;

  .partitionTitle {
    line-height: 30px;
    padding: 0 0 10px;
    font-size: 20px;
    color: #000;
  }
}
.dynamicsList {
  .middleContent {
    margin-left: 0;
  }

  .el-pagination {
    margin: 20px 0 0 40px;
  }
}
</style>
